<template>
  <div class="boxt">
    <div class="title">{{ title }}</div>
    <el-select v-model="lint" placeholder="请选择" @change="change">
      <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.code">
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: "select-view",
  props: {
    title: {
      type: String,
    },
    value: {
      type: [String, Number],
    },
    options: { Array },
  },
  data() {
    return {
      list: [],
      lint: "",
    };
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        // console.log(newVal, oldVal)
        this.lint = newVal;
      },
      deep: true,
      immediate: true,
    },
    options: {
      handler(newVal, oldVal) {
        // console.log(newVal, oldVal)
        this.list = newVal;
      },
      deep: true,
      immediate: true,
    }
  },
  created() {
    this.list = this.options
  },
  mounted() { },
  methods: {
    change(val) {
      // console.log(1111);
      // console.log(val);
      this.$emit('change', val);
      this.$emit('input', this.lint)
    },
  },
};
</script>

<style lang="scss">
.boxt {
  margin-right: 20px;
}

.title {
  font-size: 14px;
  font-weight: 400;
}

::v-deep .el-input__inner {
  height: 32px !important;
  margin-top: 5px;
}
</style>